import type { TableColumnCtx } from 'element-plus';

import type { DataFormItemProps, DataFormSchema } from '#/components/data-form';
import type { FieldProps, OnActionClickFn, RenderScope } from '#/components/data-table';

import { h, reactive, ref } from 'vue';

import { $t } from '@croco/framework/locales';

import { ElBadge } from 'element-plus';

export const defaultFileDatabaseId = ref();

export const useTable = (onActionClick: OnActionClickFn): FieldProps[] => {
    const formatter = (row: any, column: TableColumnCtx) => {
        switch (column.property) {
            case 'currentFolderName': {
                return h('span', {}, { default: () => row.currentFolderName ?? '尚未绑定' });
            }
            case 'name': {
                const isUse = defaultFileDatabaseId.value === row.id;
                return h(ElBadge, { isDot: isUse, offset: [10, 5], type: isUse ? 'success' : 'info' }, { default: () => row.name });
            }
            default: {
                return row[column.property];
            }
        }
    };

    return [
        { label: '文件库名称', prop: 'name', search: true, column: { width: 300, sortable: true, formatter } },
        { label: '存储路径', prop: 'path', column: { minWidth: 250, tooltip: true } },
        { label: '存储目录', prop: 'currentFolderName', column: { width: 150, tooltip: true, align: 'center', formatter } },
        { label: '阈值', prop: 'maxLimit', column: { width: 100, align: 'right' } },
        { label: '描述', prop: 'description', column: { width: 400, tooltip: true } },
        { label: '创建时间', prop: 'createTime', column: { width: 180 } },
        {
            column: {
                width: 150,
                maxCollapseButtons: 3,
                render: [
                    { label: '查看', icon: 'icon:search', onClick: (scope: RenderScope) => onActionClick({ code: 'browse', scope }) },
                    { auth: 'system:file:database:edit', onClick: (scope: RenderScope) => onActionClick({ code: 'edit', scope }) },
                    { auth: 'system:file:remove', onClick: (scope: RenderScope) => onActionClick({ code: 'remove', scope }), type: 'danger' },
                ],
            },
        },
    ];
};

export function useForm(): DataFormSchema {
    const rules = reactive({
        name: [{ required: true, message: $t('ui.formRules.required'), trigger: 'blur' }],
        defaultFileDatabaseId: [{ required: true, message: $t('ui.formRules.required'), trigger: 'blur' }],
        tempPath: [{ required: true, message: $t('ui.formRules.required'), trigger: 'blur' }],
        maxLimit: [{ required: true, message: $t('ui.formRules.required'), trigger: 'blur' }],
    });
    const repositoryFields: DataFormItemProps[] = [
        { prop: 'id', primary: true },
        { prop: 'name', label: '名称' },
        { prop: 'defaultFileDatabaseId', label: '文件库' },
        { prop: 'tempPath', label: '临时路径' },
    ];

    const databaseFields: DataFormItemProps[] = [
        { prop: 'id', primary: true },
        { prop: 'name', label: '文件库名称' },
        { prop: 'path', label: '存储路径', tooltip: '例如：D:/home（windows系统） 或者 /home（linux系统）' },
        { prop: 'maxLimit', label: '阈值', value: 100, tooltip: '达到阈值时切换存储目录(默认：100),修改后下次切换目录生效' },
        { prop: 'description', label: '描述', attrs: { type: 'textarea', resize: 'none', rows: 6 } },
    ];
    return { rules, repositoryFields, databaseFields };
}
